<template>
    <div class="person">
    <h2 ref = "title2">姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">展示联系方式</button>
    </div>
</template>


<script lang="ts" setup>
    import {ref} from 'vue';
    let name = ref("张三")
    let age = ref(19)
    let tel = '13827484392'

    let title2 = ref()

    function showTel(){
        alert(tel)
        console.log(tel)
        console.log(title2.value)
    }
    function changeName(){
        name.value = "zhang-san"
        console.log(name)
    }
    function changeAge(){
        age.value += 1
        console.log(age)
    }
</script>

<style scoped>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px;
    }
</style>